import QtQuick 2.15
import QtQuick.Controls 2.15 // 基本组件模块
import Qt.labs.platform as Platform
ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    property color black: Qt.rgba(0, 0, 0, 1)  // 使用合法的颜色值
    property color red: 'red'  // 使用合法的颜色值
    property color green: 'green'  // 使用合法的颜色值

    Rectangle {
        anchors.fill: parent
        color: '#333333'

        Rectangle {
            id: light1
            x: 20
            y: 30
            width: 100
            height: width
            radius: width / 2
            color: root.black
            border.color: Qt.lighter(root.black, 1.1)
        }

        Rectangle {
            id: light2
            x: 20
            y: 150
            width: 100
            height: width
            radius: width / 2
            color: root.green
            border.color: Qt.lighter(root.green, 1.1)
        }

        // States defined within the Rectangle
        states: [
            State {
                name: "stop"
                PropertyChanges {
                    target: light1
                    color: root.red
                }
                PropertyChanges {
                    target: light2
                    color: root.black
                }
            },
            State {
                name: "start"
                PropertyChanges {
                    target: light1
                    color: root.black
                }
                PropertyChanges {
                    target: light2
                    color: root.green
                }
            }
        ]

        // For demonstration purposes, toggle between states using a Timer
        Timer {
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                if (parent.state === "stop") {
                    parent.state = "start"
                } else {
                    parent.state = "stop"
                }
            }
        }
    }
}
